Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Range Slider
Quasar comes with a range slider.
To add it, we add the q-range component:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="secondary">
{{ standard.min }} to {{ standard.max }}
</q-badge>
<q-range v-model="standard" :min="0" :max="50" color="green">
</q-range>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
standard: {
min: 0,
max: 50
}
}
});
</script>
</body>
</html>
We bind the min and max value with the v-model directive.
min and max has the selected min and max values.
The color prop sets the color of the slider.
We can add the vertical prop to make the slider vertical:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="secondary">
{{ standard.min }} to {{ standard.max }}
</q-badge>
<div class="row justify-around">
<q-range
vertical
v-model="standard"
:min="0"
:max="50"
color="green"
>
</q-range>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
standard: {
min: 0,
max: 50
}
}
});
</script>
</body>
</html>
We can set the steps that the slider snap to with the step prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="secondary">
{{ standard.min }} to {{ standard.max }}
</q-badge>
<div class="row justify-around">
<q-range
v-model="standard"
:min="0"
:max="50"
:step="5"
color="green"
>
</q-range>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
standard: {
min: 0,
max: 50
}
}
});
</script>
</body>
</html>
The step prop can also be set to a floating-point number:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="secondary">
{{ standard.min }} to {{ standard.max }}
</q-badge>
<div class="row justify-around">
<q-range
v-model="standard"
:min="0"
:max="50"
:step="0.5"
color="green"
>
</q-range>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
standard: {
min: 0,
max: 50
}
}
});
</script>
</body>
</html>
Conclusion
We can add a range slider into our Vue app with Quasar’s q-range component.
